<template>
  <!-- 模板代码保持不变 -->
  <div>
    <el-card style="margin-bottom: 10px" shadow="never">
      <el-form :inline="true" style="display: flex">
        <!-- 移除原有的医生姓名和服务类型输入框 -->
        <el-form-item label="服务类型">
          <el-select
            v-model="queryForm.serviceTypeId"
            placeholder="请选择服务类型"
            filterable
            clearable
          >
            <el-option
              v-for="item in serviceTypeList"
              :key="item.serviceTypeId"
              :label="item.name"
              :value="item.serviceTypeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button @click="resetPage">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card shadow="never">
      <div class="options">
        <el-button type="primary" @click="handleOpenEdit(null)">添加绑定关系</el-button>
      </div>
      
      <doctor-service-fee-table
        :list="pager.list"
        :loading="pager.loading"
        @refresh="getList"
        @edit="handleOpenEdit"
        @delete="handleDelete"
      />

      <el-pagination
        v-model:current-page="pager.currentPage"
        v-model:page-size="pager.pageSize"
        :page-sizes="pager.pageSizes"
        :total="pager.total"
        layout="total, sizes, prev, pager, next"
        @current-change="getList"
        @size-change="getList"
      />
    </el-card>

    <edit-doctor-service-fee
      v-if="showEdit"
      ref="editRef"
      @close="showEdit = false"
      @success="handleEditSuccess"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import usePagination from "@/hooks/usePagination";
import { getDoctorServiceFeeListAPI } from "@/network/doctor_service_fee";
import { getDoctorServiceTypeListAPI } from "@/network/doctor_service_type";
import DoctorServiceFeeTable from "./components/DoctorServiceFeeTable.vue";
import EditDoctorServiceFee from "./components/EditDoctorServiceFee.vue";
import { nextTick } from "vue"; 
import feedback from '@/utils/feedback'; 
import { deleteDoctorServiceFeeAPI } from "@/network/doctor_service_fee"; 
import { debounce } from 'lodash-es'; // 引入防抖函数

// 提取常量
const DELETE_CONFIRM_MSG = "确定删除该绑定关系?";
const DELETE_SUCCESS_MSG = "删除成功";
const DELETE_FAILED_MSG = "删除失败";
const FETCH_SERVICE_TYPE_FAILED_MSG = "获取服务类型列表失败";

const queryForm = ref({
  serviceTypeId: null 
});

const serviceTypeList = ref([]); 

// 获取服务类型列表
const fetchServiceTypeList = async () => {
  try {
    const res = await getDoctorServiceTypeListAPI({
      pageNum: 1,
      pageSize: 100
    });
    if (res.records) {
      serviceTypeList.value = res.records;
    }
  } catch (error) {
    console.error(FETCH_SERVICE_TYPE_FAILED_MSG, error);
    feedback.msgError(FETCH_SERVICE_TYPE_FAILED_MSG);
  }
};

const { pager, getList, resetPage } = usePagination({
  request: getDoctorServiceFeeListAPI,
  params: queryForm
});

// 防抖处理 getList 方法
const debouncedGetList = debounce(getList, 300);

const showEdit = ref(false);
const editRef = ref(null);

const handleOpenEdit = (row) => {
  showEdit.value = true;
  // 直接调用 open 方法
  editRef.value?.open(row);
};

const handleDelete = async (id) => {
  try {
    console.log('即将删除的 serviceFeeId:', id); 
    await feedback.confirm(DELETE_CONFIRM_MSG);
    await deleteDoctorServiceFeeAPI(id);
    feedback.msgSuccess(DELETE_SUCCESS_MSG);
    debouncedGetList();
  } catch (error) {
    console.error(DELETE_FAILED_MSG, error);
    feedback.msgError(DELETE_FAILED_MSG);
  }
};

const handleEditSuccess = () => {
  showEdit.value = false;
  debouncedGetList();
};

// 组件挂载时获取服务类型列表并发起分页查询
onMounted(async () => {
  await fetchServiceTypeList();
  getList();
});
</script>